<html>

<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
		integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
		crossorigin="anonymous">
	</script>
    <script type="text/javascript">
    $(document).ready(function()
	{
		console.log('Ready!');

		$('form#sum').submit(
			function(event) {
				var $form = $(this);
				var divResult = $('div#sumResult');
				divResult.hide();
				
				$.ajax({
					type: 'GET',
					url: './helloworld/sum/' + $('input#sumFirst').val() + '/' + $('input#sumSecond').val(),

					success: function(data, status) {
						divResult.text('Result: ' + data);
						divResult.show();				
					}
				});
			event.preventDefault();
			}
		);

		$('#sumSubmit').click(
			function (){
				$('form#sum').submit();	
			}
		);

	});
    </script>
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
      <a class="navbar-brand" href="#">Powered by MARS-Curiosity a REST library for Embarcadero Delphi</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </nav>

    <main role="main" class="container">
        <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This page has been served by your MARS REST server.</p>
            <hr class="my-4">
            <p>You can serve static files, completely dynamically generated pages or use templating technologies.</p> 
        </div>

        <div class="float-left border rounded p-3">
        	<h2>Sum example</h2>
	        <form id="sum">
				<div class="form-group">
				    <label for="sumFirst">First addendum</label>
				    <input type="number" min="0" step="1" class="form-control" id="sumFirst" placeholder="Enter an integer number">
				</div>
				<div class="form-group">
				    <label for="sumSecond">Second addendum</label>
				    <input type="number" class="form-control" id="sumSecond" placeholder="Enter an integer number">
				</div>
				<button type="button" class="btn btn-primary" id="sumSubmit">Submit</button>
			</form>
			<div class="alert alert-primary collapse" role="alert" id="sumResult"></div>
		</div>



    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>